<script lang="ts">
	import { RAG_PROVIDER_TYPE, type RagConfig } from '$lib/api/proto/roadmap_rag_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import moment from 'moment';
	import EditRagConfigModal from './EditRagConfigModal.svelte';
	import { EllipsisVertical } from 'lucide-svelte';
	import ConfirmModal from '$lib/components/modal/ConfirmModal.svelte';

	interface Props {
		roadmapId: string;
	}
	let props: Props = $props();

	let showAddModal = $state(false);

	let configList = $state([] as RagConfig[]);
	let updateConfigInfo = $state(null as RagConfig | null);
	let removeConfigInfo = $state(null as RagConfig | null);

	async function loadConfigList() {
		if (userStore.userSession == null) {
			return;
		}
		const res = await callApi(
			appStore.roadmapRagApiClient.listConfig({
				sessionId: userStore.userSession,
				roadmapId: props.roadmapId
			}).response
		);
		configList = res.configList;
	}

	async function removeConfig() {
		if (userStore.userSession == null || removeConfigInfo == null) {
			return;
		}
		await callApi(
			appStore.roadmapRagApiClient.removeConfig({
				sessionId: userStore.userSession,
				roadmapId: props.roadmapId,
				ragConfigId: removeConfigInfo.ragConfigId
			}).response
		);
		const tmpList = configList.filter((item) => item.ragConfigId != removeConfigInfo?.ragConfigId);
		configList = tmpList;
		removeConfigInfo = null;
		appStore.addToastMessage({
			level: 'success',
			content: '删除知识库配置成功',
			keepTime: 2000
		});
	}

	$effect(() => {
		loadConfigList();
	});
</script>

<div class="flex justify-between">
	<h3 class="text-2xl">知识库配置</h3>
	<button class="btn btn-accent" onclick={() => (showAddModal = true)}> 增加 </button>
</div>
<div class="divider m-0"></div>

<div class="h-[calc(100vh-180px)] overflow-y-auto">
	<div class="overflow-x-auto pb-[100px]">
		<table class="table">
			<thead>
				<tr>
					<th>配置名称</th>
					<th>知识库类型</th>
					<th>API地址</th>
					<th>创建时间</th>
					<th>额外参数</th>
					<th class="w-[150px]">操作</th>
				</tr>
			</thead>
			<tbody>
				{#each configList as config}
					<tr>
						<td>{config.basicConfig?.name}</td>
						<td>
							{#if config.basicConfig?.providerType == RAG_PROVIDER_TYPE.RAG_PROVIDER_YD_QANYTHING}
								有道QAnything
							{:else if config.basicConfig?.providerType == RAG_PROVIDER_TYPE.RAG_PROVIDER_FASTGPT}
								FastGpt
							{/if}
						</td>
						<td>
							{config.basicConfig?.baseApiAddr}
						</td>
						<td>
							{moment(Number(config.createTime)).format('YYYY-MM-DD HH:mm')}
						</td>
						<td>
							{#if config.basicConfig?.providerType == RAG_PROVIDER_TYPE.RAG_PROVIDER_YD_QANYTHING}
								AgentId:{config.basicConfig.agentId}
							{/if}
						</td>
						<td>
							<div class="flex gap-2">
								<button
									type="button"
									class="btn btn-ghost text-secondary p-1"
									onclick={() => (updateConfigInfo = config)}>修改</button
								>
								<div class="dropdown">
									<div tabindex="0" role="button" class="btn btn-ghost">
										<EllipsisVertical size={16} />
									</div>
									<ul
										class="menu dropdown-content bg-base-100 rounded-box z-1 w-[80px] p-2 shadow-sm gap-2"
									>
										<li class="text-error">
											<button
												type="button"
												class="btn btn-ghost"
												onclick={() => (removeConfigInfo = config)}>删除</button
											>
										</li>
									</ul>
								</div>
							</div>
						</td>
					</tr>
				{/each}
			</tbody>
		</table>
	</div>
</div>

<div class="absolute -left-[10000px]">
	{#if showAddModal}
		<EditRagConfigModal
			roadmapId={props.roadmapId}
			onCancel={() => (showAddModal = false)}
			onOk={() => {
				showAddModal = false;
				loadConfigList();
			}}
		/>
	{/if}
	{#if updateConfigInfo != null}
		<EditRagConfigModal
			roadmapId={props.roadmapId}
			config={updateConfigInfo}
			onCancel={() => (updateConfigInfo = null)}
			onOk={() => {
				updateConfigInfo = null;
				loadConfigList();
			}}
		/>
	{/if}
	{#if removeConfigInfo != null}
		<ConfirmModal
			title="删除知识库配置"
			content={`是否删除知识库配置 ${removeConfigInfo.basicConfig?.name}?`}
			type="error"
			okName="删除"
			onCancel={() => (removeConfigInfo = null)}
			onOk={() => removeConfig()}
		/>
	{/if}
</div>
